import React from "react";
import { Button, Table, Modal, DatePicker, Tooltip, Menu } from "antd";
import ReactEcharts from 'echarts-for-react';
import jQuery from 'jquery';
import moduleNavImg from "../imgs/ksh33.png";
const globalConfig = require("../js/globalConfig");
const globalOption = require("../js/optionConfig");
const utils = require("../js/utils");

class TodayFault extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: this.props.flag,
            url: globalConfig.url + "/getTodayFaultStat"
        }
    }

    updateChart() {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {
                flag: this.state.flag
            },
            success: function (result) {
                // if(result==null)
                //     return;
                // let legendData = [];
                // let seriesData = []; 
                // for(let i=0;i<result.length;i++){
                //     legendData.push(result[i].name);
                //     seriesData.push({
                //         name:result[i].name,
                //         value:result[i].num
                //     });
                // }

                let seriesData = []
                for (let i = 0; i < 5; i++) {
                    seriesData.push({
                        name: "故障" + i,
                        value: parseInt(10 * Math.random())
                    });
                }
                let instance = this_.echartsReact.getEchartsInstance();
                instance.setOption({
                    series: [{ data: seriesData }]
                });
            }
        });
    }

    componentDidMount() {
        this.updateChart();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.flag == nextProps.flag)
            return false;
        this.setState({
            flag: nextProps.flag,
        })
        this.updateChart();
        return true;
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.faultPageOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class ThisMonthFault extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: this.props.flag,
            url: globalConfig.url + "/getThisMonthFaultStat"
        }
    }

    updateChart() {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {
                flag: this.state.flag
            },
            success: function (result) {
                // if(result==null)
                //     return;
                // let legendData = [];
                // let seriesData = []; 
                // for(let i=0;i<result.length;i++){
                //     legendData.push(result[i].name);
                //     seriesData.push({
                //         name:result[i].name,
                //         value:result[i].num
                //     });
                // }

                let seriesData = []
                for (let i = 0; i < 5; i++) {
                    seriesData.push({
                        name: "故障" + i,
                        value: parseInt(10 * Math.random())
                    });
                }
                let instance = this_.echartsReact.getEchartsInstance();
                instance.setOption({
                    series: [{ data: seriesData }]
                });
            }
        });
    }

    componentDidMount() {
        this.updateChart();
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.flag == nextProps.flag)
            return false;
        this.setState({
            flag: nextProps.flag,
        })
        this.updateChart();
        return true;
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.faultPageOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}


class Item {
    constructor(id, name, timeStamp, solution) {
        this.id = id;
        this.name = name;
        this.timeStamp = timeStamp;
        this.solution = solution;
    }
}


class FaultTable extends React.Component {
    constructor(props) {
        super(props);
        // let newData = []
        // for (let i = 0; i < 100; i++)
        //     newData.push(new Item(i.toString(), "主井", "励磁柜风机无风", "2021-01-15 00:21:04","Hello Antd!"));
        this.state = {
            url: globalConfig.url + "/getAllFault",
            flag: this.props.flag,
            columns: [
                {
                    title: '编号',
                    dataIndex: 'id',
                    key: 'id',
                    align: "center",
                },
                {
                    title: '故障名称',
                    dataIndex: 'name',
                    key: 'name',
                    align: "center",
                    render: (text, record, index) => <Tooltip title={this.state.data[index].solution}>{text}</Tooltip>,
                },
                {
                    title: '故障时间',
                    dataIndex: 'timeStamp',
                    key: 'timeStamp',
                    align: "center",
                }
            ],
            data: []
        };
    }

    updateTable() {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {
                flag: this_.state.flag
            },
            success: function (result) {
                console.log(result);
                let newData = [];
                for (let i = 0; i < result.length; i++) {
                    newData.push(new Item(i, result[i].name, result[i].timeStamp, "Hello Antd!"));
                }
                this_.setState({
                    data: newData
                });
            }
        });
    }

    componentDidMount() {
        this.updateTable();
    }

    render() {
        return (
            <Table style={{ width: "100%"}} columns={this.state.columns} dataSource={this.state.data} size="small" bordered />
        );
    }
}

class DaySelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: globalConfig.url + "/fault/daySelect",
            flag: this.props.flag,
            beginDate: this.props.beginDate,
            option: {
                xAxis: [{ name: "故障名称" }],
                yAxis: [{ name: "次数" }],
                series: [
                    {
                        name: "故障名称",
                        type: 'bar'
                    },
                ]
            }
        };
    }

    updateChart() {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {
                beginDate: this_.state.beginDate,
                flag: this_.state.flag
            },
            success: function (result) {
                let xData = [];
                let yData = [];
                for (let i = 0; i < 10; i++) {
                    xData.push("故障" + i);
                    yData.push(parseInt(10 * Math.random()) + 1);
                }
                let instance = this_.echartsReact.getEchartsInstance();
                utils.setOption(instance, xData, yData);
            }
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.beginDate === nextProps.beginDate || nextProps.beginDate === "")
            return false;
        this.setState({
            beginDate: nextProps.beginDate
        });
        this.updateChart();
        return true;
    }

    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();
        instance.setOption(this.state.option);
        this.updateChart();
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.modelOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class MonthSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            url: globalConfig.url + "/fault/monthSelect",
            flag: this.props.flag,
            beginDate: this.props.beginDate,
            option: {
                xAxis: [{ name: "故障名称" }],
                yAxis: [{ name: "次数" }],
                series: [
                    {
                        name: "故障名称",
                        type: 'bar'
                    },
                ]
            }
        };
    }

    updateChart() {
        var this_ = this;
        jQuery.ajax({
            url: this_.state.url,
            dataType: "JSON",
            type: "POST",
            data: {
                beginDate: this_.state.beginDate,
                flag: this_.state.flag
            },
            success: function (result) {
                let xData = [];
                let yData = [];
                for (let i = 0; i < 10; i++) {
                    xData.push("故障" + i);
                    yData.push(parseInt(30 * Math.random()) + 1);
                }
                let instance = this_.echartsReact.getEchartsInstance();
                utils.setOption(instance, xData, yData);
            }
        });
    }

    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.beginDate === nextProps.beginDate || nextProps.beginDate === "")
            return false;
        this.setState({
            beginDate: nextProps.beginDate
        });
        this.updateChart();
        return true;
    }

    componentDidMount() {
        let instance = this.echartsReact.getEchartsInstance();
        instance.setOption(this.state.option);
        this.updateChart();
    }

    render() {
        return (
            <ReactEcharts ref={e => { this.echartsReact = e; }} option={globalOption.options.modelOption} style={{ height: "100%", width: "100%" }} opts={{ renderer: 'svg' }} />
        );
    }
}

class FaultPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            flag: "1",
            infoVisible: false,
            isDayVisible: false,
            isDayEnable: false,
            isMonthVisible: false,
            isMonthEnable: false,
            beginDate: "",
            current: "1"
        }
    }

    onChange(date, dateString) {
        console.log(dateString);
        this.setState({
            beginDate: dateString,
            infoVisible: false
        });
    }


    dayHandleOk() {
        if (this.state.beginDate.length <= 0) {
            this.setState({
                infoVisible: true,
                isDayEnable: false
            });
        } else {
            this.setState({
                infoVisible: false,
                isDayEnable: true
            });
        }
    }
    dayHandleClose() {
        this.setState({
            isDayVisible: false,
            infoVisible: false,
            isDayEnable: false
        });
    }
    dayShowModal() {
        this.setState({
            isDayVisible: true,
        });
    }

    monthHandleOk() {
        if (this.state.beginDate.length <= 0) {
            this.setState({
                infoVisible: true,
                isMonthEnable: false
            });
        } else {
            this.setState({
                infoVisible: false,
                isMonthEnable: true
            });
        }
    }
    monthHandleClose() {
        this.setState({
            isMonthVisible: false,
            infoVisible: false,
            isMonthEnable: false
        });
    }
    monthShowModal() {
        this.setState({
            isMonthVisible: true,
        });
    }

    render() {
        const { current } = this.state;
        return (
            <div className="my-lay-all" id="fault-page">
                <div>
                    <nav>
                        <Menu theme="dark" mode="horizontal" selectedKeys={[current]} className="page-nav">
                            <Menu.Item key="1" onClick={() => { this.setState({ flag: "1", current: "1" }); }}>
                                主井信息
                            </Menu.Item>
                            <Menu.Item key="2" onClick={() => { this.setState({ flag: "0", current: "2" }) }}>
                                副井信息
                            </Menu.Item>
                        </Menu>
                        {/* <div className="left-btns">
                            <Button className="page-btn" ghost onClick={() => { this.setState({ flag: "1" }); }}>主井信息</Button>
                            <Button className="page-btn" ghost onClick={() => { this.setState({ flag: "0" }); }}>副井信息</Button>
                        </div> */}
                        <div className="right-btns">
                            <Button className="page-btn" ghost onClick={() => this.dayShowModal()}>按日查询</Button>

                            <Modal title="按日查询" visible={this.state.isDayVisible} width={700}
                                onCancel={() => this.dayHandleClose()}
                                footer={[
                                    <Button key="submit" type="default" onClick={() => this.dayHandleClose()}>取消</Button>,
                                    <Button key="submit" type="primary" onClick={() => this.dayHandleOk()}>查询</Button>
                                ]}
                            >
                                <span style={{ marginRight: 10 }}>请选择日期</span>
                                <DatePicker onChange={(date, dateString) => this.onChange(date, dateString)} />
                                {this.state.infoVisible ? <span style={{ marginLeft: 10 }}>请选择查询日期！</span> : <span />}
                                {this.state.isDayEnable ? <div className="modelChart"><DaySelect beginDate={this.state.beginDate} flag={this.state.flag} /></div> : <div />}
                            </Modal>

                            <Button className="page-btn" ghost onClick={() => this.monthShowModal()}>按月查询</Button>
                            <Modal title="按月查询" visible={this.state.isMonthVisible} width={800}
                                onCancel={() => this.monthHandleClose()}
                                footer={[
                                    <Button key="submit" type="default" onClick={() => this.monthHandleClose()}>取消</Button>,
                                    <Button key="submit" type="primary" onClick={() => this.monthHandleOk()}>查询</Button>
                                ]}
                            >
                                <span style={{ marginRight: 10 }}>请选择日期</span>
                                <DatePicker picker="month" onChange={(date, dateString) => this.onChange(date, dateString)} />
                                {this.state.infoVisible ? <span style={{ marginLeft: 10 }}>请选择查询日期！</span> : <span />}
                                {this.state.isMonthEnable ? <div className="modelChart"><MonthSelect beginDate={this.state.beginDate} flag={this.state.flag} /></div> : <div />}
                            </Modal>
                        </div>
                    </nav>
                    <div>
                        <div className="my-module-3">
                            <nav>
                                <div className="curve-link">本日故障统计</div>
                                <img src={moduleNavImg} alt=""></img>
                            </nav>
                            <div>
                                <TodayFault flag={this.state.flag} />
                            </div>
                        </div>
                        <div className="my-module-3">
                            <nav>
                                <div className="curve-link">本月故障统计</div>
                                <img src={moduleNavImg} alt=""></img>
                            </nav>
                            <div>
                                <ThisMonthFault flag={this.state.flag} />
                            </div>
                        </div>
                        <div className="my-module-3">
                            <nav>
                                <div className="curve-link">故障信息</div>
                                <img src={moduleNavImg} alt=""></img>
                            </nav>
                            <div id="fault-page-table" style={{backgroundColor:"white"}}>
                                <FaultTable flag={this.state.flag} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default FaultPage;